<template>
  <div>
    <mt-header fixed :title="msg"></mt-header>
    <ul>
      <li>
        <div @click="itemDetail('iOS')">iOS</div>
      </li>
      <li>
        <div class="item_right" @click="itemDetail('Android')">Android</div>
      </li>
      <li>
        <div @click="itemDetail('App')">App</div>
      </li>
      <li>
        <div class="item_right" @click="itemDetail('前端')">前端</div>
      </li>
      <li>
        <div @click="itemDetail('瞎推荐')">瞎推荐</div>
      </li>
      <li>
        <div class="item_right" @click="itemDetail('拓展资源')">拓展资源</div>
      </li>
      <li>
        <div @click="itemDetail('休息视频')">休息视频</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Sort",
  data() {
    return {
      msg: "分类",
      items: []
    };
  },
  methods: {
    itemDetail(name) {
      this.$router.push({
        path: '/sort_list',
        query: {
          name: name
        }
      });
    },
  }
};
</script>

<style scoped>
ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li div {
  background-color: fff;
  width: 48%;
  height: 200px;
  float: left;
  line-height: 200px;
  margin: 5px 2px 0px 2px;
  border: 1px solid #ccc;
  background-color: #fff;
}
li div .item_right {
  float: right;
}
</style>

